<template>
   <li>
        <input type="checkbox" :checked="list.IsOk" @click="handlerCheck">
        <span>{{list.title}}</span>
        <button @click="deleteTaskName">删除</button>
   </li>
</template>
<script>

export default {
    Name:"MyItem",
    props:['list','deleteItem','changeIsOk'],
    methods: {
        deleteTaskName(){
            this.deleteItem(this.list.id)
        },
        handlerCheck(){
            this.changeIsOk(this.list.id,this.list.IsOk)
        }
    },
}
</script>
<style scoped>
    li{
        overflow: hidden;
    }
    button{
        float: right;
        margin-right: 10px;
        background-color: #e25050;
        border:1px solid salmon;
        color: white;
        display: none;
    }

    li:hover button{
        cursor: pointer;
        display: block;
        
    }

    li:hover{
        background-color: #ddd;
    }
</style>